<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>test1</title>
   <script type="text/javascript" src="../scripts/mootools.js"></script>
   <style type="text/css">
   	.none{
   		display: none;
   	}
   </style>
   
</head>
<body>
<div style="border: 1px solid #cdf;width: 150px;" id="root">
	<div style="background-color: #cdf;width: 100%;height: 20px;text-align: right">↓↓</div>
	<ul>
		<li><a>test1</a></li>
		<li><a>test1</a></li>
		<li><a>test1</a></li>
		<li><a>test1</a></li>
		<li><a>test1</a></li>
		<li><a>test1</a></li>
	</ul>
</div>
</body>
<script>
	window.addEvent('domready', function(){
		$('root').getElement('div').addEvent('click', function(){
			if(this.hasClass('hid')) {
				this.set('html','↓↓');
				this.removeClass('hid');
			}else {
				this.set('html','↑↑');
				this.addClass('hid');
			}
			this.getNext('ul').toggleClass('none');
		});
	});
</script>
</html>